<!DOCTYPE html >
<html>

	<head>
		<meta charset="utf-8" />
		<title>无标题文档</title>
		<link rel="stylesheet" href="dahuiji.css" />
		<script>
			window.onload = function(){
				var oUL = document.getElementById("options");
				oUL.addEventListener("click",function(e){
					var level = e.target.getAttribute("value");
					window.ge = new GameEngine().start(level);
				})
			}
			GameEngine.cons = {
				PLANE_TYPE_SMALL : Symbol(),
				PLANE_TYPE_MIDDLE : Symbol(),
				PLANE_TYPE_LARGE : Symbol(),
			}
			function GameEngine(){
				var self = this;
				self.enemes = new Set();
				self.body = document.getElementById("body_main");
				self.start = function(level){
					//难度等级
					self.difLevel = level;
					//更换界面
					self.body.children[0].style.display = "none";
					//背景移动
					self.bgmoving();
					
					new Promise(self.loading).then(function(){
						//创建我的飞机
						window.myplane = new MyPlane().show();
						self.autoCreateEnemy();
						self.monitor(); //开启碰撞检测
					})
					return self;
				}
				self.autoCreateEnemy = function(){//自动创建敌人
					setInterval(function(){
						var flag = Math.round(Math.random());
						if(flag){
							self.enemes.add(new Enemy(GameEngine.cons.PLANE_TYPE_SMALL).init().move());
						}
					},500);
					setInterval(function(){
						var flag = Math.round(Math.random());
						if(flag){
							self.enemes.add(new Enemy(GameEngine.cons.PLANE_TYPE_MIDDLE).init().move());
						}
					},2000);
					setInterval(function(){
						var flag = Math.round(Math.random());
						if(flag){
							self.enemes.add(new Enemy(GameEngine.cons.PLANE_TYPE_LARGE).init().move());
						}
					},5000);
				}
				self.loading = function(success){//载入动画
					//显示LOGO
					var logo = document.createElement("div");
					logo.className = "logo";
					document.body.appendChild(logo);
					
					//显示进度条
					var loadDiv = document.createElement("div");
					loadDiv.className = "loading";
					document.body.appendChild(loadDiv);
					var count = 0;
					var t = setInterval(function(){
						loadDiv.style.background = "url(images/loading" + (++count%3+1) +".png";
						if(count > 10){
							clearInterval(t);
							logo.remove();
							loadDiv.remove();
							success();
						}
					},300);
					
				}
				self.bgmoving = function(){//背景移动
					var _top = 0;
					setInterval(function(){
						self.body.style.backgroundPosition = "0px "+ (_top+=3) + "px";
					},30);
				}
				self.left = function(){
					return self.body.offsetLeft;
				}
				self.width = function(){
					return self.body.offsetWidth;
				}
				self.notify = function(bullet){//收到提醒，检测子弹碰撞
					for(var e of self.enemes.keys()){
						self.isOverlap(bullet, e);
					}
				}
				self.isOverlap = function(bullet,plane){ //是否发生重叠
					var leftSide = plane.left()-bullet.width();
					var rightSide = plane.left()+plane.width();
					var upSide = plane.top()-bullet.height();
					var downSide = plane.top()+plane.height();
					
					if(bullet.left() > leftSide && bullet.left() < rightSide && bullet.top() > upSide && bullet.top() < downSide){
						bullet.explode();
						plane.hurt();
					}
				}
			}
			function MyPlane(){
				var self = this;
				self.body = document.createElement("div");
				self.init = function(){
					self.body.className = "my-warplain";
					self.body.style.left = ge.left() + ge.width()/2 - self.width()/2 + "px";
					self.body.style.bottom = 0;
				}
				self.show = function(){
					document.body.appendChild(self.body);
					self.init();
					self.controller.start();
					self.autoFire();
					return self;
				}
				self.left = function(){
					return self.body.offsetLeft;
				}
				self.width = function(){
					return self.body.offsetWidth;
				}
				self.top = function(){
					return self.body.offsetTop;
				}
				self.controller = {
					start : function(){
						document.addEventListener("mousemove", function(e){
							var _left = e.clientX-self.width()/2;
							self.body.style.left = Math.min(ge.left()+ge.width()-self.width(),Math.max(ge.left(),_left)) + "px";
						});
					}
				}
				self.autoFire = function(){
					setInterval(function(){
						new Bullet().init().move();
					},ge.difLevel*200);
				}
			}
			function Enemy(type){
				var self = this;
				self.body = document.createElement("div");
				self.init = function(){
					switch(type){
						case GameEngine.cons.PLANE_TYPE_SMALL : {
							self.body.className = "enemy-small";
							self.speed = 10;
							self.hp = 1;
							break;
						}
						case GameEngine.cons.PLANE_TYPE_MIDDLE : {
							self.body.className = "enemy-middle";
							self.speed = 5;
							self.hp = 5;
							break;
						}
						case GameEngine.cons.PLANE_TYPE_LARGE : {
							self.body.className = "enemy-large";
							self.speed = 2;
							self.hp = 10;
							break;
						}
					}
					ge.body.appendChild(self.body);
					self.left( Math.round(Math.random()*(ge.width()-self.width())) );
					self.top(-self.height());
					return self;
				}
				self.left = function(val){
					if(val != undefined){
						self.body.style.left = val + "px";
					} else {
						return self.body.offsetLeft;
					}
				}
				self.top = function(val){
					if(val != undefined){
						self.body.style.top = val + "px";
					} else {
						return self.body.offsetTop;
					}
				}
				self.width = function(){
					return self.body.offsetWidth;
				}
				self.height = function(){
					return self.body.offsetHeight;
				}
				self.move = function(){
					self.timer = setInterval(function(){
						self.body.style.top = self.top() + self.speed + "px";
						if(self.top() > window.innerHeight){
							self.destroy();
						}
					},30);
					return self;
				}
				self.hurt = function(){
					if(--self.hp == 0) {
						self.explode();
					}
				}
				self.explode = function(){
					self.destroy();
				}
				self.destroy = function(){
					self.body.remove();
				}
			}
			function Bullet(){
				var self = this;
				self.body = document.createElement("div");
				self.init = function(){
					self.body.className = "bullet";
					ge.body.appendChild(self.body);
					self.body.style.left = myplane.left()-ge.left()+myplane.width()/2-self.width()/2 + "px";
					self.body.style.top = myplane.top()-self.height() + "px";
					return self;
				}
				self.move = function(){
					self.timer = setInterval(function(){
						self.body.style.top = self.top() - 20 + "px";
						ge.notify(self);//通知引擎检测碰撞
						if(self.top() < -self.height() ){
							self.destroy();
							clearInterval(self.timer);
						}
					},30);
				}
				self.destroy = function(){
					self.body.remove();
				}
				self.top = function(val){
					if(val != undefined){
						self.body.style.top = val + "px";
					} else {
						return self.body.offsetTop;
					}
				}
				self.left = function(val){
					if(val != undefined){
						self.body.style.left = val + "px";
					} else {
						return self.body.offsetLeft;
					}
				}
				self.width = function(){
					return self.body.offsetWidth;
				}
				self.height = function(){
					return self.body.offsetHeight;
				}
				self.explode = function(){
					clearInterval(self.timer);
					var oldwidth = self.width();
					var oldheight = self.height();
					self.body.className = "bullet_die";
					//调整位置
					self.left( self.left()-self.width()/2+oldwidth/2 );
					self.top( self.top()-self.height()/2+oldheight/2 );
					setTimeout(function(){
						self.body.style.background = "url(images/die2.png)";
						setTimeout(function(){
							self.destroy();
						},50);
					},50);
				}
			}
		</script>
	</head>

	<body>
		<div id="body_main" class="main">
			<ul id="options" class="options">
				<li value="4">超级困难</li>
				<li value="3">非常困难</li>
				<li value="2">比较困难</li>
				<li value="1">春哥附体</li>
			</ul>
		</div>
	</body>
	
</html>